<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>客户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/X-admin/css/font.css">
    <link rel="stylesheet" href="/X-admin/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/X-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/X-admin/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    .layui-upload-img { width: 90px; height: 90px; margin: 0; }
    .pic-more { width:100%; left; margin: 10px 0px 0px 0px;}
    .pic-more li { width:90px; float: left; margin-right: 5px;}
    .pic-more li .layui-input { display: initial; }
    .pic-more li a { position: absolute; top: 0; display: block; }
    .pic-more li a i { font-size: 24px; background-color: #008800; }    
    #slide-pc-priview .item_img img{ width: 90px; height: 90px;}
    #slide-pc-priview li{position: relative;}
    #slide-pc-priview li .operate{ color: #000; display: none;}
    #slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;}
    #slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;}
    #slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
    #slide-pc-priview li:hover .operate{ display: block;}    
    </style>
</head>

<body>
<div class="x-body">
    <form class="layui-form">
        <input type="hidden" name="shopId" value="{$shop.shopId}">
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>店铺名称
            </label>
            <div class="layui-input-inline">
                <input type="text"  disabled="disabled" id="" name="" required="" value="{$shop.shopName}"
                       lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>店铺名称
            </div>
        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>店铺地址
            </label>
            <div class="layui-input-inline">
                <input type="text" id="address" name="address" class="layui-input" value="{$shop.address}"/>
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>店铺地址
            </div>
        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>经纬度
            </label>
            <div class="layui-form-mid layui-word-aux">
                <input type = "text" id = "lat" name = "lat" placeholder="请输入纬度" class="layui-input" value="{$shop.lat}"/>
                <input type = "text" id = "lng" name = "lng" placeholder="请输入经度" class="layui-input" value="{$shop.lng}"/>
                <span class="x-red"><a target="_blank" style="color: red;" href="https://lbs.qq.com/tool/getpoint/">点我获取经纬度</a></span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>禁用状态
            </label>
            <div class="layui-input-inline">
                <input type="radio" name="status" lay-filter="erweima" value="1" title="正常" {if condition="$shop.status eq 1"}checked{/if}>
                <input type="radio" name="status" lay-filter="erweima" value="2" title="禁用" {if condition="$shop.status eq 2"}checked{/if}>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>是否上门服务
            </label>
            <div class="layui-input-inline">
                <input type="radio" name="type" lay-filter="erweima" value="1" title="开启" {if condition="$shop.type eq 1"}checked{/if}>
                <input type="radio" name="type" lay-filter="erweima" value="2" title="关闭" {if condition="$shop.type eq 2"}checked{/if}>
            </div>
        </div>
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>店长
              </label>
              <div class="layui-input-inline">
                  <select name="staffId" lay-verify="">
                    {volist name="staff" id="staff"}
                    <option value="{$staff.userId}"{if condition="$shop.staffId eq $staff.userId"}selected="selected"{/if}>{$staff.userName}</option>
                    {/volist}
                  </select>     
              </div>
          </div>
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>产品
              </label>
              {volist name="$rs" id="rs"}
              <div class="layui-input-inline">
                  <input type="checkbox" id="product" name="product" lay-filter="erweima" title="{$rs.name}" value="{$rs.id}" {if condition="$rs['son']"}checked="checked"{/if}>
                  <input type = "text" id = "lat" lay-filter="erweima" name = "shopMoney{$i}" placeholder="原价" class="layui-input" {if condition="$rs['son']"}value="{$rs['son']['shopMoney']}"{/if}   />
                  <input type = "text" id = "lat" {if condition="$rs['son']"}value="{$rs['son']['discount']}"{/if}  name = "discount{$i}" placeholder="折扣" class="layui-input"/>
              </div>
              {/volist}
          </div>


        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>上传多张图片</legend>
            </fieldset>

             <div class="layui-input-block" style="width: 70%;">
                <div class="layui-upload">
                  <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">选择多图</button>
                  <div class="pic-more">
                    <ul class="pic-more-upload-list" id="slide-pc-priview">
                    {if condition="$pic"}
                    {volist name="pic" id="pic"}
                    <li class="item_img">
                        <div class="operate">
                            <i class="close layui-icon" onclick="closeImg(this)"></i>
                        </div>
                        <img src="{$pic.pic}" class="img" >
                        <input type="hidden" name="pic" value="{$pic.pic}" />
                    </li>
                    {/volist}
                    {/if}

                    </ul>
                  </div>
                </div>
              </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button class="layui-btn" lay-filter="add" lay-submit="">
                确认修改
            </button>
        </div>
    </form>
</div>
<script>
     layui.use('upload', function(){
     var $ = layui.jquery;
     var upload = layui.upload;            
     upload.render({
         elem: '#slide-pc',
         url: "{:url('Admin/Shop/upload')}",
         exts: 'jpg|png|jpeg',
         multiple: true,
         before: function(obj) {
             layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
         },
         done: function(res) {
            console.log(res);
            layer.close(layer.msg());//关闭上传提示窗口
             if(res.code == 0) {
                 return layer.msg(res.msg);
             }
             //$('#slide-pc-priview').append('<input type="hidden" name="pc_src[]" value="' + res.filepath + '" />');
             $('#slide-pc-priview').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i  class="close layui-icon"></i></div><img src="' + res.data + '" class="img" ><input type="hidden" name="pic" value="' + res.data + '" /></li>');
         }
     });
    });
    //点击多图上传的X,删除当前的图片   
function closeImg(a){
      var dom = ((a.parentNode).parentNode).children[2];

        jQuery.ajax({
            url: "{:url('Admin/shop/picDel')}",
            type: "post",
            dataType: "json",
            async: true,
            data: 
            {
                "pic": dom.value
            },
            success: function (data) {
                if(data.code==1){
                    a.closest("li").remove();
                }else{
                    layer.alert(data.msg, {icon: 5}, function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                    });
                }

            }
        });



};

</script>
<script>

    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;

        //监听提交
        form.on('submit(add)', function (data) {
            console.log(data);
            var arr = new Array();
            $("input:checkbox[name='product']:checked").each(function(i){
                arr[i] = $(this).val();
            });
            data.field.product = arr.join(",");//将数组合并成字符串

            var aa = new Array();
            $("input[name='pic']").each(function(i){
               aa[i] = $(this).val();
            });
            data.field.pic = aa.join(",");//将数组合并成字符串
            //发异步，把数据提交给php
            jQuery.ajax({
                url: "{:url('Admin/shop/editPost')}",
                type: "post",
                dataType: "json",
                async: true,
                data: data.field,
                success: function (data) {
                    layer.alert(data.msg, {icon: 6}, function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                    });
                }
            });
             return false;
        });


    });
</script>
</body>

</html>